<template>
  <div style="overflow: hidden; ">
    <main >
      <section>内容1</section>
      <section>内容2</section>
      <section>内容3</section>
      <section>内容4</section>
    </main>
  </div>
</template>

<script>
export default {
  name: "MainView"
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
main{
  /*滚动贴合方向y:纵向  mandatory :强制滚动 proximity*/
  scroll-snap-type: y proximity;
  /*设置滚动贴合上方 空间*/
  /*scroll-padding: 80px;*/
  overflow-y: scroll;
  height: 100vh
}
section{
  width: auto;
  height: 100vh;
  /*子元素贴合方向*/
  /*start 贴合到顶部*/
  scroll-snap-align: start;
}
</style>